<template>
  <!-- <div> -->
  <div class="BarwEcharts2">
    <div id="Bar2"></div>
  </div>
  <!-- </div> -->
</template>

<script setup lang="ts">
const echart = inject("echart");
let myChart = null;
import { menuStore } from "@/store/modules/menu";
const menulist = menuStore();
menulist.$subscribe((arg, state) => {  //需要写在数据变化前面
    // console.log('subscribe', arg, state)
    getData()
})

const props = defineProps({
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "300px"
  }
});

onMounted(() => {
  initEcharts();
  getData();
});
onUnmounted(() => {
  if (myChart.isDisposed) {
    myChart.clear();
    myChart.dispose();
    myChart = null;
  }
});

const getData = () => {
  renderEcharts();
};
const initEcharts = () => {
  myChart = echart.init(document.getElementById("Bar2"));
};
const renderEcharts = () => {
  var xdata = [
    "2022年", "2021年", "2020年", "2019年", "2018年","2017年"
  ];
  var ydata1 = [];
  var ydata2 = [];
  var ydata3 = [];
  xdata.forEach(item => {
    ydata1.push(Math.floor(Math.random() * 80) + 1);
    ydata2.push(Math.floor(Math.random() * 80) + 1);
    ydata3.push(Math.floor(Math.random() * 80) + 1);
  });
  myChart.setOption({
    // backgroundColor: "",
    grid: { containLabel: true, top: 80, right: 15, bottom: 0, left: 15 },
    legend: {
      show: true,
      data: ["营收金额", "同比增长"],
      textStyle: { fontSize: 18, color: "#ffffff" }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" }
    },
    xAxis: {
      type: "category",
      data:xdata,
      axisLine: {
        show: true,
        lineStyle: { color: "#7097B8", type: "solid" }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        show: true,
        fontSize: 14,
        color: "#7097B8",
        fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN"
      }
    },
    yAxis: [
      {
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          show: true,
          fontSize: 14,
          color: "#7097B8",
          fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
          formatter: "{value} 万元"
        },
        splitLine: { show: false }
      },
      {
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          show: true,
          fontSize: 14,
          color: "#7097B8",
          fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
          formatter: "{value} %"
        },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: "营收金额",
        type: "bar",
        barWidth: "50%",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(14,58,99, .5)"
        },
        itemStyle: {
          color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(3, 255, 150, 1)" },
            { offset: 1, color: "rgba(0, 251, 255, 0)" }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#83bff6" },
              { offset: 1, color: "#2378f7" }
            ])
          }
        },
        data:ydata1
      },
      {
        name: "同比增长",
        type: "line",
        yAxisIndex: 1,
        itemStyle: {
          normal: {
            lineStyle: {
              color: "#FFA600" //改变折线颜色
            }
          }
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              // 渐变颜色
              {
                offset: 0,
                color: "rgba(255, 166, 0, 0.3)"
              },
              {
                offset: 1,
                color: "rgba(255, 166, 0, 0.5)"
              }
            ],
            global: false
          }
        },
        smooth: false,
        showAllSymbol: true,
        symbol: "emptyCircle",
        symbolSize: 6,
        data: ydata2
      }
    ]
  });
};
window.addEventListener("resize", () => {
  //监听浏览器大小去改变图表尺寸
  myChart.resize();
});
</script>

<style scoped>
.BarwEcharts2 {
  height: 100%;
  width: 100%;
  /* height: 500px; */
  /* background-color: aliceblue; */
}

#Bar2 {
  height: 100%;
  width: 100%;
  /* background-color: aliceblue; */
}
</style>